		<!--家政培训详情-->
<template>
	<div class="homeMarkingTrain">

		<div class="small-hiddle" style="background-color: #f7f7f7;width: 100%;">
			<Row type="flex" align="middle" justify="center" style="height: 40px;">
				<Col  style="width: 1200px;text-align: left;padding-left: 10px;">
					<span>
						<span>首页</span>
						<span>></span>
						<span>家政服务</span>
						<span>></span>
						<span>家政培训</span>
					</span>
				</Col>
			</Row>
		</div>
		<div style="width: 100%;background-color: #f7f7f7;">
			<div class="small-hiddle" style="width: 1200px;margin: 0 auto;background-color: white;">
				<Row style="padding: 10px;" >
					<Col span="8" style="padding: 10px;">
						<img style="width: 100%;" src="../../../../static/img/card_example.png"/>
					</Col>
					<Col span="16" style="padding: 10px;">
						<div>
							<p style="font-size: 22px;">家政培训标题</p>
							<div>
								<span style="color: #f09a04;">
									<span>￥</span>
									<span style="font-size: 20px;">199.00</span>
									<span>元</span>
								</span>
								<span>/4小时</span>
							</div>
							<div style="height: 1px;width: 100%;background-color: #f7f7f7;margin: 15px 0px;"></div>
							<div style="padding: 10px 0px;">
								<span>预约时间：</span>
								<Select v-model="model1" style="width:200px">
							        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
							    </Select>
							    <Select v-model="model1" style="width:100px">
							        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
							    </Select>
							</div>
							<div style="padding: 10px 0px;">
								<span>数&emsp;&emsp;&nbsp;量：</span>
								<Select v-model="model1" style="width:200px">
							        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
							   </Select>
							</div>
							<div style="padding: 10px 0px;">
								<span>人&emsp;&emsp;&nbsp;数：</span>
								<Select v-model="model1" style="width:200px">
							        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
							   </Select>
							</div>
							<div style="height: 1px;width: 100%;background-color: #f7f7f7;margin: 15px 0px;"></div>
							<div style="padding: 10px 0px;">
								<span>姓&emsp;&emsp;&nbsp;名：</span>
								<Select v-model="model1" style="width:200px">
							        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
							   </Select>
							   <span style="margin-left: 20px;">电&emsp;&emsp;&nbsp;话：</span>
								<Select v-model="model1" style="width:200px">
							        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
							   </Select>
							</div>
							<div style="padding: 10px 0px;">
								<span>地&emsp;&emsp;&nbsp;址：</span>
								<Input v-model="value" placeholder="" style="width: 500px" />
							</div>
							<div style="padding: 10px 0px;">
								<span>备&emsp;&emsp;&nbsp;注：</span>
								<Input type="textarea" :rows="2" v-model="value" placeholder="" style="width: 500px" />
							</div>
							<div style="padding: 10px 0px;">
								<Button type="warning" style="margin-left: 75px;">提交订单</Button>
								<Button type="warning" style="background-color: white;color: #f09a04;">预定热线：400-1234-123</Button>
							</div>
						</div>
					</Col>
				</Row>
			</div>
		
			<div style="width: 100%;height: 20px;background-color: #f7f7f7;"></div>
			<div class="body-card">
				<Row >
					<Col span="24" style="text-align: center;">
						<div style="font-size: 25px;padding: 20px;">
			        		<div>专注家政培训10年</div>
			        	</div>
					</Col>
				</Row>
				<Row >
					<Col span="24" >
						<img style="width: 100%;" src="../../../../static/img/photo5.png"/>
					</Col>
				</Row>
				
				
			</div>
			<div style="width: 100%;height: 20px;background-color: #f7f7f7;"></div>
			<div class="body-card">
				<Row >
					<Col span="24" style="text-align: center;">
						<div style="font-size: 25px;padding: 20px;">
			        		<div>四大优势</div>
			        	</div>
					</Col>
				</Row>
				<Row >
					<Col span="24" >
						<img style="width: 100%;" src="../../../../static/img/photo6.png"/>
					</Col>
				</Row>
				<Row style="padding-bottom: 20px;">
					<Col span="12" style="text-align: center;">
						<span class="serve-font-title">专业师资团队</span>
					</Col>
					<Col span="12" style="text-align: center;">
						<span class="serve-font-title">颁发国家通用证书</span>
					</Col>
				</Row>
				<Row >
					<Col span="24" >
						<img style="width: 100%;" src="../../../../static/img/photo7.png"/>
					</Col>
				</Row>
				<Row style="padding-bottom: 20px;">
					<Col span="12" style="text-align: center;">
						<span class="serve-font-title">培训后高薪就业</span>
					</Col>
					<Col span="12" style="text-align: center;">
						<span class="serve-font-title">理论与实操相结合</span>
					</Col>
				</Row>
			</div>
			<div style="width: 100%;height: 20px;background-color: #f7f7f7;"></div>
			<div class="body-card">
				<Row >
					<Col span="24" style="text-align: center;">
						<div style="font-size: 25px;padding: 20px;">
			        		<div>服务优势</div>
			        	</div>
					</Col>
				</Row>
				<Row >
					<Col span="6" style="text-align: center;">
						<img style="width: 100%;" src="../../../../static/img/serveGood1.png"/>
						<p style="font-size: 20px;padding: 20px;">严格培训</p>
					</Col>
					<Col span="6" style="text-align: center;">
						<img style="width: 100%;" src="../../../../static/img/serveGood2.png"/>
						<p style="font-size: 20px;padding: 20px;">缴纳保险</p>
					</Col>
					<Col span="6" style="text-align: center;">
						<img style="width: 100%;" src="../../../../static/img/serveGood3.png"/>
						<p style="font-size: 20px;padding: 20px;">健康认证</p>
					</Col>
					<Col span="6" style="text-align: center;">
						<img style="width: 100%;" src="../../../../static/img/serveGood4.png"/>
						<p style="font-size: 20px;padding: 20px;">人证合一</p>
					</Col>
				</Row>
			</div>
			<div style="width: 100%;height: 20px;background-color: #f7f7f7;"></div>
			<div class="body-card" style="padding: 20px;">
				<Row >
					<Col span="24" style="text-align: center;">
						<div class="serve-font-title">
			        		<div >八大服务保障-让您安心放心</div>
			        	</div>
					</Col>
				</Row>
				<Row >
					<Col span="6" style="text-align: center;">
						<p class="serve-font-title">时长保障</p>
						<p class="serve-font-text">服务未满4小时，订单重做</p>
					</Col>
					<Col span="6" style="text-align: center;border-left: 1px solid #e8e7e7;">
						<p class="serve-font-title">财产保障</p>
						<p class="serve-font-text">发送财产损坏丢失，先行赔付</p>
					</Col>
					<Col span="6" style="text-align: center;border-left: 1px solid #e8e7e7;">
						<p class="serve-font-title">人员保障</p>
						<p class="serve-font-text">自营员工，身份认证，规范培训</p>
					</Col>
					<Col span="6" style="text-align: center;border-left: 1px solid #e8e7e7;">
						<p class="serve-font-title">安全保障</p>
						<p class="serve-font-text">附赠客户，保洁员人身保障险</p>
					</Col>
				</Row>
				<div style="width: 92%;height: 1px;background-color: #e8e7e7;margin: 10px auto;"></div>
				<Row >
					<Col span="6" style="text-align: center;">
						<p class="serve-font-title">品质保障</p>
						<p class="serve-font-text">未使用标准工具，订单重做</p>
					</Col>
					<Col span="6" style="text-align: center;border-left: 1px solid #e8e7e7;">
						<p class="serve-font-title">健康保障</p>
						<p class="serve-font-text">每年定期组织服务人员体检</p>
					</Col>
					<Col span="6" style="text-align: center;border-left: 1px solid #e8e7e7;">
						<p class="serve-font-title">隐私保障</p>
						<p class="serve-font-text">不使用客户用品，不泄露客户隐私</p>
					</Col>
					<Col span="6" style="text-align: center;border-left: 1px solid #e8e7e7;">
						<p class="serve-font-title">售后保障</p>
						<p class="serve-font-text">多渠道，多客服，在线快速响应</p>
					</Col>
				</Row>
			</div>
		</div>
		
		<Button class="big-hiddle" v-show="!placeOrder" @click="showPlaceOrder" style="background-color:  #f09a04;color: white;position: fixed;right: 7%;bottom: 5%;z-index: 1;"  shape="circle">预定</Button>
		<div v-if="placeOrder" style="position: fixed;width: 90%;height: 88%;border-radius: 10px;border: 1px solid #d4d2d2;z-index: 1;top: 60px;background-color: white;    left: 0;right: 0;margin: auto;">
			
			
			<div style="overflow-y: scroll;height: 90%;">
				<p style="font-size: 22px;padding: 10px;">家政培训标题</p>
				<div>
					<span style="color: #f09a04;padding-left: 10px;">
						<span>￥</span>
						<span style="font-size: 20px;">199.00</span>
						<span>元</span>
					</span>
					<span>/4小时</span>
				</div>
				<div style="height: 1px;width: 100%;background-color: #f7f7f7;margin: 5px 0px;"></div>
				<div style="text-align: center;padding: 5px;">
					<span>预约时间：</span>
					<Select v-model="model1" style="width:60%">
				        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				   </Select>
				</div>
				<div style="text-align: center;padding: 5px;">
					<span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</span>
				    <Select v-model="model1" style="width:60%">
				        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				    </Select>
				</div>
				<div style="text-align: center;padding: 5px;">
					<span>数&emsp;&emsp;&nbsp;量：</span>
					<Select v-model="model1" style="width:60%">
				        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				   </Select>
				</div>
				<div style="text-align: center;padding: 5px;">
					<span>人&emsp;&emsp;&nbsp;数：</span>
					<Select v-model="model1" style="width:60%">
				        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				   </Select>
				</div>
				<div style="height: 1px;width: 100%;background-color: #f7f7f7;margin: 15px 0px;"></div>
				<div style="text-align: center;padding: 5px;">
					<span>姓&emsp;&emsp;&nbsp;名：</span>
					<Select v-model="model1" style="width:60%">
				        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				  </Select>
				</div>
				<div style="text-align: center;padding: 5px;">
				   <span >电&emsp;&emsp;&nbsp;话：</span>
					<Select v-model="model1" style="width:60%">
				        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				   </Select>
				</div>
				<div style="text-align: center;padding: 5px;">
					<span>地&emsp;&emsp;&nbsp;址：</span>
					<Input v-model="value" placeholder="" style="width:60%" />
				</div>
				<div style="text-align: center;padding: 5px;">
					<span>备&emsp;&emsp;&nbsp;注：</span>
					<Input type="textarea" :rows="2" v-model="value" placeholder="" style="width:60%" />
				</div>
			</div>
			
			
			
			
			<div style="position: absolute;bottom: 4%;padding: 5px 20px;width: 100%;display: flex;justify-content: space-between;">
				<Button  @click="showPlaceOrder" style="background-color: white;color: #f09a04;width: 30%;"  shape="circle">取消</Button>
				<Button   style="background-color: #f09a04;color: white;width: 60%;"  shape="circle">提交订单</Button>
			</div>
			<div style="position: absolute;bottom: 1%;width: 100%;display: flex;justify-content: center;font-size: 13px;color: #f09a04;">
				预定热线：400-1234-123
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				placeOrder:false,
				cityList: [
                    {value: 'New York',label: 'New York'},
                    {value: 'London',label: 'London'},
                    {value: 'Sydney',label: 'Sydney'},
                    {value: 'Ottawa',label: 'Ottawa'},
                    {value: 'Paris',label: 'Paris'},
                    {value: 'Canberra',label: 'Canberra'}
                ],
                model1: '',
                value:"",
			}
		},
		methods:{
			showPlaceOrder:function(){
				this.placeOrder = !this.placeOrder
			}
		}
	}
</script>

<style lang="css" scoped>
	/** 电脑 **/
	@media only screen and (min-width: 540px){
		.homeMarkingTrain >>>.body-card{
			width: 1200px;
			margin: 0 auto;
			background-color: white;
		}
		.homeMarkingTrain >>> .serve-font-title{
			font-size: 25px;
			padding: 5px;
		}
		.homeMarkingTrain >>> .serve-font-text{
			font-size: 15px;
			padding: 5px;
		}
		.homeMarkingTrain >>> .big-hiddle{
			display: none !important;	
		}
	}
	/** 手机 **/
	@media only screen and (max-width: 540px) {
		.homeMarkingTrain >>>.small-hiddle{
			display: none !important;	
		}
		.homeMarkingTrain >>> .body-card{
			width: 100%;
			background-color: white;
		}
		.homeMarkingTrain >>> .serve-font-title{
			font-size: 15px;
			padding: 5px;
		}
		.homeMarkingTrain >>> .serve-font-text{
		 	font-size: 12px;
			padding: 5px;
		}
	}
</style>